const scaleNames = {
    c: 'Celsius',
    f: 'Fahrenheit'
};

function toCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
    return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert) {
    const input = parseFloat(temperature);
    if (Number.isNaN(input)) {
        return '';
    }
    const output = convert(input);
    const rounded = Math.round(output * 1000) / 1000;
    return rounded.toString();
}

function BoilingVerdict(props) {
    if (props.celsius >= 100) {
        return <p>The water would boil.</p>;
    }
    return <p>The water would not boil.</p>;
}

class TemperatureInput extends React.Component{
 constructor(props){
     super(props);
     this.templateChange = this.templateChange.bind(this);
 }
 templateChange(ev){
     this.props.onTemplateChange(ev.target.value)
 }
 render(){
     const templateVal = this.props.templateVal;
     const scale = scaleNames[this.props.scale]
     return(
         <fieldset >
             <legend>Enter temperature in {scale}</legend>
            <input value={templateVal} onChange = {this.templateChange}/>
         </fieldset>
     )
 }
}

class Calculator extends React.Component{
    constructor(props){
        super(props);
        this.state = {temperature: '', scale: 'c'};
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    }
    handleCelsiusChange(temperature) {
        this.setState({scale: 'c', temperature});
    }

    handleFahrenheitChange(temperature) {
        this.setState({scale: 'f', temperature});
    }
    render(){
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

        return(
            <div>
                <TemperatureInput
                    scale = "c"
                    templateVal = {celsius}
                    onTemplateChange={this.handleCelsiusChange}
                />
                <TemperatureInput
                    scale = "f"
                    templateVal = {fahrenheit}
                    onTemplateChange = {this.handleFahrenheitChange}
                    />
                </div>
        )
    }
}
